<template>
  <div class="examQuestionView">
    <p class="numberView">第{{selectedIndex + 1}}题 {{resultType}}</p>
    <div>
      <div v-if="question.isMix">
        <mix-question-m :question="question" :examType="examType" :mix-answer="selectedAnswer"
                        @sendOptionClick="optionClick"></mix-question-m>
      </div>
      <div v-else>
        <question-item-m :question="question" :answer="selectedAnswer" :examType="examType"
                         @sendOptionClick="optionClick"></question-item-m>
      </div>

    </div>
    <div style="height: 56px;"></div>
    <div class="btnView">
      <div :class="selectedIndex === 0 ? 'disableBtn' : 'preBtn'" @click="preClick">上一题</div>
      <div style="width: 1px"></div>
      <div :class="selectedIndex === (questionList.length - 1) && examType == 6 ? 'disableBtn' : 'preBtn'" @click="nextClick">
        {{selectedIndex === (questionList.length - 1)&& examType != 6 ? '交卷' : '下一题'}}</div>
    </div>
  </div>
</template>

<script>

  import QuestionItemM from './QuestionItemM'
  import MixQuestionM from './MixQuestionM'
  import {Dialog, Toast} from 'vant'
  Vue.use(Dialog)

  //questionList 题目列表
  //answerData 自己的答案列表
  //examType 1:统筹考试 2:普通考试 3:模拟考试 4:题库练习 5:错题库 6:题目分析
  //selectedIndex 当前题目index

  export default {
    name: 'ExamQuestionM',
    model: {
      prop: 'selectedIndex',
      event: 'changeSelectedIndex'
    },
    props: ['questionList', 'selectedIndex', 'answerData', 'examType'],
    data () {
      return {
        //当前题目答案
        selectedAnswer: undefined,
      }
    },
    computed: {
      question () {
        let question = this.questionList[this.selectedIndex]
        this.selectedAnswer = this.answerData[question.id] || {}
        return question
      },
      resultType () {
        let type = this.question.resultType
        if (type == 1) {
          return '单选题'
        } else if (type == 2) {
          return '多选题'
        } else {
          return '综合题'
        }
      }
    },
    components: {
      QuestionItemM,
      MixQuestionM
    },
    methods: {
      //题目选项点击
      optionClick (question, answer) {

        if (Object.keys(answer).length === 0) {
          delete this.answerData[question.id]
        } else {
          this.answerData[question.id] = answer
        }
        this.$emit('sendAnswerClick')
      },
      preClick () {

        if (this.selectedIndex == 0) {
          Toast('已经是第一题了')
          return
        }
        this.$emit('changeSelectedIndex', this.selectedIndex - 1)
        window.scrollTo(0, 0)
      },
      nextClick () {
        if (this.selectedIndex == (this.questionList.length - 1)) {
          if(this.examType == 6){
            Toast('已经到最后一题了')
          }else{
            Dialog.confirm({
              title: '确认交卷',
              message: '确认交卷？交卷后则考试结束',
            })
              .then(() => {
                this.$emit('sendSubmitClick')
            })
              .catch(() => {
            })
          }
        } else {
          this.$emit('changeSelectedIndex', this.selectedIndex + 1)
          window.scrollTo(0, 0)
        }

      }
    }
  }
</script>

<style scoped>
  .examQuestionView {

  }

  .numberView {
    font-size: 16px;
    color: #333333;
    padding: 12px 16px;
    font-weight: bold;
    border-bottom: #E7E7E7 1px solid;
    margin-bottom: 16px;
  }

  .btnView {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: #E7E7E7 1px solid;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
  }

  .preBtn {
    background-color: #1DA1F2;
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  .disableBtn {
    background-color: #9B9B9B;
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: bold;

  }

</style>
